<template>
  <div
    class="container-body article-list-body"
    :style="{ width: proxy.globalInfo.bodyWidth + 'px' }"
  >
    <!-- 二级板块信息  有子板块才展示-->
    <div class="sub-board" v-if="pBoardId">
      <span :class="['border-item', boardId == 0 ? 'active' : '']"
        ><router-link :to="`/forum/${pBoardId}`">全部</router-link></span
      >
      <span
        v-for="item in subBoardList"
        :class="['border-item', item.boardId == boardId ? 'active' : '']"
        ><router-link :to="`/forum/${item.pBoardId}/${item.boardId}`">{{
          item.boardName
        }}</router-link></span
      >
    </div>
    <div class="article-panel">
      <div class="top-tab">
        <div
          :class="['tab', orderType == 0 ? 'active' : '']"
          @click="changeOrderType(0)"
        >
          热榜
        </div>
        <el-divider direction="vertical" />
        <div
          :class="['tab', orderType == 1 ? 'active' : '']"
          @click="changeOrderType(1)"
        >
          发布时间
        </div>
        <el-divider direction="vertical" />
        <div
          :class="['tab', orderType == 2 ? 'active' : '']"
          @click="changeOrderType(2)"
        >
          最新
        </div>
      </div>
      <div class="article-list">
        <DataList
          :dataSource="articleListInfo"
          @pageChange="handlePageNoChange"
          :loading="loading"
          noDataMessage="没有发现帖子，赶紧来一个吧"
        >
          <template #default="{ data }">
            <ArticleListItem :data="data"> </ArticleListItem>
          </template>
        </DataList>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import ArticleListItem from "@/views/forum/ArticleListItem.vue";
import { useStore } from "vuex";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const store = useStore();
const api = {
  loadArticle: "/forum/loadArticle",
};
//文章列表
//一级板块
const pBoardId = ref(0);
//二级板块
const boardId = ref(0);
const loading = ref(false);
const articleListInfo = ref({});

const orderType = ref(0);

//处理热榜、发布时间、最新帅选条件type参数变化
const changeOrderType = (type) => {
  orderType.value = type;
  loadArticle();
};
//监听组件页面改变刷新数据函数
const handlePageNoChange = (pageNo) => {
  articleListInfo.value.pageNo = pageNo;
  loadArticle();
};
//获取文章列表
const loadArticle = async () => {
  loading.value = true;
  let params = {
    pageNo: articleListInfo.value.pageNo,
    orderType: orderType.value,
    pBoardId: pBoardId.value,
    boardId: boardId.value,
  };
  let result = await proxy.Request({
    url: api.loadArticle,
    params: params,
    //获取数据成功后不显示加载框
    showLoading: false,
  });
  loading.value = false;
  if (!result) {
    return;
  }
  articleListInfo.value = result.data;
};
//二级板块
const subBoardList = ref([]);
// 从store拿子板块SubBoard信息
const setBoardList = () => {
  subBoardList.value = store.getters.getSubBoardList(pBoardId.value);
};
// 设置 immediate: true 意味着在组件创建时就会立即执行一次监听器回调 所以不需要在挂载时请求数据
// onMounted(() => {
//   loadArticle();
// });
// 监听路由变化
watch(
  () => route.params,
  (newValue, oldValue) => {
    // 获取当前板块信息
    pBoardId.value = newValue.pBoardId;
    boardId.value = newValue.boardId || 0;
    // 监听路由变化获取板块信息
    setBoardList();
    loadArticle();
    //将当前一级板块信息存入store
    store.commit("setActivePBoardId", newValue.pBoardId);
    //将当前二级板块信息存入store
    store.commit("setActiveBoardId", newValue.boardId);
  },
  { immediate: true, deep: true }
);
//监听板块数据变化
watch(
  () => store.state.boardList,
  (newValue, oldValue) => {
    // 页面刷新保持子板块数据状态同时保证后端返回信息成功才去调用可以拿到子板块信息
    setBoardList();
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.article-list-body {
  .sub-board {
    display: flex;
    padding: 10px 0;
    .border-item {
      background: #fff;
      border-radius: 15px;
      padding: 3px 10px;
      margin-right: 10px;
      color: #909090;
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      a {
        text-decoration: none;
        color: #909090;
      }
    }
    .active {
      background: var(--link);
      a {
        color: #fff;
      }
    }
  }
  .article-panel {
    background: #fff;
    .top-tab {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      font-size: 15px;
      border-bottom: 1px solid #ddd;
    }
    .tab {
      cursor: pointer;
    }
    .active {
      color: var(--link);
    }
  }
}
</style>
